<template>
	<div id="v4">
		<h1>vue标签属性和条件渲染</h1>
			<!-- 标签属性 -->
			<a 
			class="big-font"
			:class="fontColor"
			:href="link"
			:title="tip">go to baidu </a>
		<h2 :class="titleClass">对象类名</h2>
		<button @click="toRed">change title red</button>
		<button @click="toBlue">change title blue</button>
		<h2 :style="h2Style">关联样式</h2>
		<button @click="bigger">bigger</button>

		<p v-if="part === 'a'">parta</p>
		<p v-else-if="part === 'b'">partb</p>
		<p v-else>partc</p>
		<p v-show="part === 'a'">parta v-show</p>

		<button @click="toggle">toggle</button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				link: 'http://www.baidu.com',
				tip: 'go to baidu',
				fontColor: 'red-font',
				titleClass: {
					'red-font': false,
					'blue-font': false
				},
				h2Style: {
					'text-decoration': 'line-through',
					'font-weight': 'blod',
					'font-size': '12px'
				},
				part: 'c'
			}
		},
		methods: {
			toRed () {
				this.titleClass = {
					'red-font': true,
					'blue-font': false
				}
			},
			toBlue () {
				this.titleClass = {
					'red-font': false,
					'blue-font': true
				}
			},
			bigger () {
				this.h2Style['font-size'] = this.h2Style['font-size'].replace('px', '')*1.5 + 'px'
			},
			toggle () {
				let seed = Math.random()
				this.part = 'c'
				if (seed < .3) {
					this.part = 'a'
				}
				else if (seed < .6) {
					this.part = 'b'
				}

			}
		}
	}
</script>

<style scoped>
	div {
		background-color: rgba(255, 0, 0, .2);
	}

	a {
		text-decoration:  none;
	}

	.red-font {
		color: red;
	}

	.blue-font {
		color: blue;
	}

	.big-font {
		font-size: 40px;
	}
</style>